<template>
  <div class="all-bomb-view" ref="allBomb" @scroll="scrollHandel">
    <div class="top-nav">
      <div class="goback" @click="goBack"><van-icon name="arrow-left" /></div>
      <div class="title">全部爆社</div>
    </div>
    <div class="content-box">
      <div class="content-list-wrap" v-for="item in contentData" :key="item.id">
        <UserMsgCom
          :contentData="item"
          :isFollow="item.isFollow"
          @followHandel="followHandel(item)"
          @getHeight="getHeight"
        />
      </div>
    </div>
  </div>
</template>

<script>
import UserMsgCom from "@/components/HomeCom/UserMsgCom.vue";
import { getHoneBombAllContent } from "@/api/home";
import { throttle } from "@/utils/throttle";
export default {
  name: "allBomb",
  components: {
    UserMsgCom,
  },
  data() {
    return {
      contentData: [],
      timer: null,
      childrenTotalHeight: 0,
      loading: true,
    };
  },
  created() {
    this.getHoneBombAllContentData(0);
    this.timer = setTimeout(() => {
      this.getFollowedData2();
      this.timer = null;
    }, 100);
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //获取所有爆社数据
    getHoneBombAllContentData(dataParams) {
      getHoneBombAllContent({ axios: this.$axios }, dataParams).then(
        ({ data }) => {
          // console.log(data);
          data.data.forEach((item) => {
            item["isFollow"] = false;
          });
          this.contentData.push(...data.data);
          // console.log(this.contentData);
        }
      );
    },
    //关注
    followHandel(item) {
      item.isFollow = !item.isFollow;
      let followedData2 = JSON.parse(
        window.localStorage.getItem("followedData2")
      );
      let idArr = [];
      followedData2.forEach((item) => {
        idArr.push(item.id);
      });
      if (item.isFollow && idArr.indexOf(item.id) == -1) {
        followedData2.push(item);
        window.localStorage.setItem(
          "followedData2",
          JSON.stringify(followedData2)
        );
      } else {
        // console.log(followedData2.indexOf(item));
        followedData2.forEach((item2, index) => {
          if (item2.id == item.id) {
            followedData2.splice(index, 1);
            window.localStorage.setItem(
              "followedData2",
              JSON.stringify(followedData2)
            );
          }
        });
      }
    },
    //滚动事件
    scrollHandel: throttle(function () {
      if (
        this.$refs.allBomb.scrollTop + 500 >= this.childrenTotalHeight &&
        this.loading == true
      ) {
        this.getHoneBombAllContentData(1);
        this.loading = false;
      }
      if (
        this.loading == false &&
        this.$refs.allBomb.scrollTop >= this.childrenTotalHeight
      ) {
        this.$toast("没有更多了哦~");
      }
    }, 500),
    //计算总高度
    getHeight(val) {
      this.childrenTotalHeight += val;
    },
    //获取爆社已关注
    getFollowedData2() {
      let followedData2 = JSON.parse(
        window.localStorage.getItem("followedData2")
      );
      let followedData2Id = [];
      followedData2.forEach((item) => {
        followedData2Id.push(item.id);
      });
      this.contentData.forEach((item) => {
        if (followedData2Id.indexOf(item.id) != -1) {
          item.isFollow = true;
        } else {
          item.isFollow = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.all-bomb-view {
  width: 100%;
  height: 100vh;
  overflow: auto;
  .top-nav {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 100;
    .goback {
      font-size: 20px;
    }
    .title {
      width: 100%;
      text-align: center;
    }
  }
  .content-box {
    padding: 10px;
    margin: 50px 0;
  }
}
</style>